<template>
  <div class="container"> 
     <div class="mainbody">
      <div class="sidebar" :class="{ open: sidebarOpen }">
        <div v-if="!sidebarOpen" style="width: 100%;height: 100%;" @click="toggleSidebar">
           
        </div>
        <div v-if="sidebarOpen" class="talk_record">
                <div class="talk_record_head"   @click="toggleSidebar" >
                      <div class="line">

                      </div>
                      <div class="text">
                          <div>历史对话</div>
                      </div>
                </div>
                <div class="talk_record_content">
                    <div v-for="(item,index) in talk_record" class="item" :class="{ bg: selected==index }"  @click="selectitem(index)">
                          <div class="icon1">
                            <el-icon size="20px"><ChatDotRound /></el-icon>
                          </div>
                          <div class="name">
                              <el-tooltip
                                class="box-item"
                                effect="dark"
                                :content="item"
                                placement="top"
                                >
                                  <div>{{ item.length<8?item:item.substring(0,9)+"....." }}</div>
                                </el-tooltip>
                          </div>
                          <div class="icon2"  @click="editname(index)">
                            <el-icon><EditPen /></el-icon>
                          </div>
                          <div class="icon3" @click="deletename(index)">
                            <el-icon><Delete /></el-icon>
                          </div>
                    </div>
                </div>
            </div>

            <!--弹出修改名字的框-->
            <el-dialog
                v-model="dialogVisible"
                title="修改"
                width="30%"
                :before-close="handleClose"
              >
              <el-input v-model="tempname"  />
                <template #footer>
                  <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="changename">
                      确定
                    </el-button>
                  </span>
                </template>
              </el-dialog>

          </div>
            <div class="mainbody_head">
                  <Head></Head>
            </div>
            <div class="mainbody_content">
              <div class="content_container">
                  <div class="chat_box">
                      <!-- 这个是聊天框 -->
                      <div class="botoom">
                        <!-- 这个是文本 -->
                        <div class="chat-content" ref="chatContent">
                          <div class="chat-wrapper" v-for="item in chatList" :key="item.id">
                            <!-- 判断是用户还是自己 -->
                            <div class="chat-friend" v-if="item.uid !== '1001'">
                            <!-- 这里是对方的对话框 -->
                            <div class="chat-text2" v-if="item.chatType == 0">
                              {{ item.msg }}
                            </div>

                            <!-- 这里是对方的聊天时间显示 -->
                            <div class="info-time2">
                              <span>{{ item.time }}</span>
                            </div>
                          </div>
                              <!-- 这里是我的聊天内容和显示 -->
                          <div class="chat-me"  v-else>
                                <div class="chat-text" v-if="item.chatType == 0" >
                                {{ item.msg }}
                              </div>
                              <!-- 这里是发送方的时间的显示 -->
                              <div class="info-time">
                                <span>{{ item.time }}</span>
                              </div>
                            </div>

                          </div>
                      </div>
                      </div>
                      </div>
                      <!--放知识库文件-->
                      <div class="filefield">


                      </div>
              </div>
                <div class="mainbody_content_foot">
                  <div class="foot">
                    <div class="leftbtn">
                      <div class="leftimg">
                              <img src="../assets/icon/refresh.png" style="width: 100%;height: 100%;"/>
                            </div>
                    <div class="btn_lefttext">
                                <div style="font-size: 8px;">新建对话</div>
                            </div>
                        </div>
                      <div class="btn">
                            <div class="img">
                              <img src="../assets/icon/refresh.png" style="width: 100%;height: 100%;"/>
                            </div>
                            <div class="btn_text">
                                <div style="font-size: 8px;">清除记录</div>
                            </div>
                      </div>
                      <!-- 输入框和按钮更改 -->
                      <div class="chatInputs">
                            <input class="inputs" v-model="inputMsg" @keyup.enter="sendText" />
                      <!-- 按钮更改 -->
                      <div class="send boxinput"  @click=" sendText">
                                  <img src="../assets/icon/send.png"  style="width: 100%;height: 100%; border-radius: 15px;" />   
                        </div>
                        </div>
                      <!-- 输入框和按钮更改 -->
                  </div>
                  </div>
        </div>
     </div>
    </div>
</template>

<script>
import Head from "@/components/Head.vue"
import { animation } from "@/func/func";
// import api from "../api/index"
// import { createNamespacedHelpers } from "vuex";
// const { mapState,mapGetters ,mapMutations,mapActions}=createNamespacedHelpers('global')
export default{
  data(){
    return {
      input:"",
      sidebarOpen: false,
      talk_record:[
          "补发外国人永久身份证",
          "补发外国人在中国广东省的永久居住证明",
          "新建对话",
      ],
      selected:null,
      dialogVisible:false,
      tempname:"",
      inputText: '',
      isFocused: false,
      inputMsg: "",
      tempMsg:"",
      chatList: [],
    }
  },
  components:{
   Head
  },
  computed:{
    // ...mapState(["history"])
  },
  methods:{
    // ...mapMutations(["undateHistory"]),
    toggleSidebar() {
      this.sidebarOpen = !this.sidebarOpen; // 切换侧边栏的打开/关闭状态
    },
    selectitem(index) {
      this.selected=index;
      console.log("点击了",this.selected);
    },
    editname(index) {
       this.tempname=this.talk_record[index];
       this.dialogVisible=true;
    },
    changename() {
      this.talk_record[this.selected]=this.tempname;
      this.dialogVisible=false;
    },
    deletename(index) {
      this.talk_record.splice(index, 1);  
    },
        // 发送信息的函数
   sendMsg(msgList) {
      this.chatList.push(msgList);
      this.scrollBottom();
    },
    //获取窗口高度并滚动至最底层
    scrollBottom() {
      this.$nextTick(() => {
        const scrollDom = this.$refs.chatContent;
        animation(scrollDom, scrollDom.scrollHeight - scrollDom.offsetHeight);
      });
    },
     
    //发送文字信息
async sendText() {
  let newDate = new Date(); 
  let sendtime=newDate.getHours()+":"+(newDate.getMinutes().toString().length==1?("0"+newDate.getMinutes()):(newDate.getMinutes()));;
  console.log("发送时间",sendtime);
      if (this.inputMsg) {
        let chatMsg = {
          time: sendtime,
          msg: this.inputMsg,
          chatType: 0, //信息类型，0文字，1图片
          uid: "1001", //uid
        };
        this.sendMsg(chatMsg);
        this.tempMsg=this.inputMsg;
        this.inputMsg = "";
      } else {
         alert('内容不可为空哦')
      }


        // let chatMsg = {
        //   time: "09：12 AM",
        //   msg: "信息类型，0文字，1图片信息类型，0文字，1图片信息类型，0文字，1图片信息类型，0文字，1图片信息类型，0文字，1图片信息类型，0文字，1图片",
        //   chatType: 0, //信息类型，0文字，1图片
        //   uid: "1000", //uid
        // };
        // this.sendMsg(chatMsg);

      //发送请求
      // try {
      //   const params = {
      //     question: this.tempMsg,
      //     history: this.history
      //   };

      //   // 调用api中的登录接口
      //   const response = await api.chat(params);
        
      //   // 处理登录成功后的逻辑
      //   console.log("成功",response);
      //   // this.answer=response.response;
      //   let newDate2 = new Date(); 
      //   let receivetime=newDate2.getHours()+":"+(newDate2.getMinutes().toString().length==1?("0"+newDate2.getMinutes()):(newDate2.getMinutes()));;
      //   console.log("发送时间",receivetime);
      //   let chatMsg = {
      //     time: receivetime,
      //     msg: response.response,
      //     chatType: 0, //信息类型，0文字，1图片
      //     uid: "1000", //uid
      //   };
      //   this.sendMsg(chatMsg);

      //   // this.undateHistory(response.history);

      // } catch (error) {
      //   // 处理登录失败后的逻辑
      //   alert("网络请求失败");

      //   console.error("报错",error);
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;     /* 占满浏览器宽度 */
  height: 100%;    /* 占满浏览器高度 */
  display: flex;
  flex-direction: row;
  justify-content: center ;
  align-items: center;
  cursor:default;
  caret-color: transparent;
  position: relative; /* 设置容器为相对定位，使得内容和侧边栏可以相对定位 */
}

.sidebar {
  position: absolute; /* 设置侧边栏为绝对定位，使其脱离文档流 */
  top: 0;
  left: 0;
  height:90vh; /* 设置侧边栏的高度为对话框高度*/
  width: 40px; /* 设置侧边栏的默认宽度 */
  background-color:#314382 ; /* 设置侧边栏的默认背景色，浅蓝色透明 */
  opacity: 0.8;/* 设置侧边栏的默认背景色，浅蓝色透明 */
  border-top-right-radius: 13px;
  border-bottom-right-radius: 13px;
  z-index: 999; /* 将侧边栏的层级设置为最高，使其覆盖在内容之上 */
  transition: all 0.1s ease; /* 添加动画过渡效果 */
  pointer-events: auto; /* 禁用侧边栏的鼠标交互事件，使其下面的内容可以点击 */
}

.sidebar.open {
  width: 250px; /* 设置侧边栏打开时的宽度 */
  background-color:#dae7f8 ; ; /* 设置侧边栏的默认背景色，浅蓝色透明 */
  opacity: 1;/* 设置侧边栏的默认背景色，浅蓝色透明 */
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  pointer-events: auto; /* 启用侧边栏的鼠标交互事件 */
}

.talk_record {
  height:90vh;
  width: 250px;
  display: flex;
  flex-direction: column;
  justify-content: baseline ;
  align-items: center;
}
.talk_record .talk_record_head {
  height:6vh;
  width: 250px;
  border-top-right-radius: 15px;
  background-color: #c6d8f0;
  display: flex;
  flex-direction: column;
  justify-content: center ;
  align-items: center;
}
.talk_record_head .line {
  width: 80px;
  height: 3px;
  background-color: #000000;
}
.talk_record_head .text {
  width: 85px;
  height: 4vh;
  color: #000000;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
.talk_record .talk_record_content {
  height:80vh;
  width: 250px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  justify-content: baseline ;
  align-items: center;
}

.talk_record_content .item {
  height:40px;
  width: 250px;
  display: flex;
  flex-direction: row;
  justify-content: center ;
  align-items: center;
}

.bg {
  background-color: #9ec0ed;
}
.item .icon1 {
  height:40px;
  width: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center ;
  align-items: center;
}

.item .icon2 {
  height:30px;
  width: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center ;
  align-items: center;
}

.item .icon3 {
  height:30px;
  width: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center ;
  align-items: center;
}

.item .name {
  height:40px;
  width: 150px;
  font-size: 14px;
  color: black;
  display: flex;
  flex-direction: row;
  justify-content: baseline ;
  align-items: center;
}

/**
不显示滚动条
 */
::-webkit-scrollbar {
        width: 0px;
    }
.container .mainbody{
  min-width:75vw;
  width: auto !important;
  height:90vh;
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.chat_box .botoom {
  min-width: 70vw;
  width: auto !important;
  height: 74vh;
  background-color:transparent;
  border-radius: 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

}
.botoom .chat-content {
      width: 100%;
      height: 100%;
      overflow-y: scroll;
      padding: 25px;
      box-sizing: border-box;
      &::-webkit-scrollbar {
        width: 0; /* Safari,Chrome 隐藏滚动条 */
        height: 0; /* Safari,Chrome 隐藏滚动条 */
        display: none; /* 移动端、pad 上Safari，Chrome，隐藏滚动条 */
      }
}
.chat-wrapper {
        position: relative;
        word-break: break-all;
}
.chat-me {
          width: 100%;
          float: right;
          margin-bottom: 20px;
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          align-items: flex-end;
}

.chat-text {
            float: right;
            max-width: 300px;
            height: auto !important;
            padding: 20px;
            border-radius: 20px 20px 5px 20px;
            background-color: rgb(29, 144, 245);
            color: #fff;
            margin-bottom: 20px;
            /* &:hover {
              background-color: rgb(167, 10, 88);
            /* } 不知道为什么不行的hover */
}

.chat-text2 {
            float: left;
            max-width: 300px;
            height: auto !important;
            padding: 20px;
            border-radius: 20px 20px 20px 5px;
            background-color: rgb(29, 144, 245);
            color: #fff;
            margin-bottom: 20px;
            /* &:hover {
              background-color: rgb(167, 10, 88);
            /* } 不知道为什么不行的hover */
}

.info-time {
            margin: 10px 0;
            color: #fff;
            font-size: 14px;
            display: flex;
            justify-content: flex-end;
            span {
              line-height: 30px;
            }
            span:first-child {
              color: rgb(101, 104, 115);
              margin-right: 10px;
              vertical-align: middle;
            }
}

.info-time2 {
           margin-left:0px;
           width: 70px;
            color: #fff;
            font-size: 14px;
            /* font-size: 14px;
            display: flex;
            justify-content: flex-end;
            span {
              line-height: 30px;
            }
            span:first-child {
              color: rgb(101, 104, 115);
              margin-right: 10px;
              vertical-align: middle;
            } */
}

.mainbody .mainbody_head {
  min-width: 75vw;
  width: auto !important;
  height: 6vh;
  background-color:  #FFFFFF; 
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.mainbody_head .left_part {
    min-width: 25vw;
    width: auto !important;
    height: 6vh;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.left_part .logo {
  min-width: 10vw;
  width: auto !important;
  height: 6vh;
  display: flex;
  text-align: center;
  flex-direction: row;
  justify-content:center;
  align-items: center;
  background-color: aqua;
}

.left_part .tap {
  min-width: 12vw;
  width: auto !important;
  height: 6vh;
  display: flex;
  text-align: center;
  flex-direction: row;
  justify-content:space-between;
  align-items: center;
}

.tap .tap1 {
  min-width: 3vw;
  width: auto !important;
  height: 6vh;
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content:center;
  align-items: center;
}
.tap .tap2 {
  min-width: 6vw;
  width: auto !important;
  height: 6vh;
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content:center;
  align-items: center;
}
.mainbody_head .right_part {
    min-width: 20vw;
    width: auto !important;
    height: 6vh;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.right_part .witcher {
  min-width: 9vw;
  width: auto !important;
  height: 6vh;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.right_part .headicon {
  min-width: 9vw;
  width: auto !important;
  height: 6vh;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.mainbody .mainbody_content {
  min-width: 75vw;
  width: auto !important;
  height: 84vh;
  background-color: #E7F1FB;
  display: flex;
  flex-direction: column;
  justify-content: baseline;
  align-items: center;
}


.mainbody_content .content_container {
  width: 75vw;
  height: 77vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}


.content_container .chat_box {
  width: 54vw;
  height: 74vh;
  margin-top:3vh;
  margin-left:4vw;
  background:linear-gradient(to right,#96b1da  0%,#96B4E2 40%,#88a9da 100%);
  border-radius: 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.content_container .filefield {
  width: 15vw;
  height: 74vh;
  margin-top:3vh;
  margin-left:1vw;
  background:linear-gradient(to right,#96b1da  0%,#96B4E2 40%,#88a9da 100%);
  border-radius: 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.mainbody_content .mainbody_content_foot {
  min-width: 70vw;
  width: auto !important;
  height: 9vh;
  margin-top: 1vh;
  background-color: #E7F1FB;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.mainbody_content_foot .foot {
  min-width: 45vw;
  width: auto !important;
  height: 6vh;
  background-color: #E7F1FB;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}


.foot .btn {
  min-width: 6vw;
  width: auto !important;
  height: 4vh;
  border-radius: 30px;
  background-color: #90A5EF;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.leftbtn {
  margin: 0 20px;
  min-width: 6vw;
  width: auto !important;
  height: 4vh;
  border-radius: 30px;
  background-color: #90A5EF;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.leftimg{
  min-width: 1vw;
  width: auto !important;
  height: 4vh;
}

.btn_lefttext {
  min-width: 2vw;
  width: auto !important;
  height: 4vh;
  text-align: left;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

}


.btn .img {
  min-width: 1vw;
  width: auto !important;
  height: 4vh;
}
.btn .btn_text {
  min-width: 2vw;
  width: auto !important;
  height: 4vh;
  text-align: left;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/* 用来规范按钮和文本框的格式 */
.chatInputs{
   
  min-width: 30vw;
  width: auto !important;
  height: 5vh;
  
  margin-left:2vw;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  justify-content: baseline;
  align-items: center;

}
/* 输入文本框的格式 */
.inputs {
  width: auto !important;
  caret-color: black;
  min-width: 33vw;
  height: 5vh;  
  background-color: rgb(254, 255, 255);
  border-top-left-radius:15px;
  border-bottom-left-radius:15px;
  border: 0;
  padding: 10px;
  box-sizing: border-box;
  transition: 0.2s;
  font-size: 18px;
  color: #030000;
  font-weight: 100;
  margin: 0 -10px;
  outline: none;
}

.boxinput {
  min-width: 2vw;
  height: 5vh;
  width: auto !important;
  border: 0;
  background-color: rgb(217, 220, 230);
  border-radius: 15px;
  position: relative;
  cursor: pointer;
}


/* .foot .btn {
  min-width: 8vw;
  width: auto !important;
  height: 4vh;
  border-radius: 30px;
  background-color: #90A5EF;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.btn .img {
  min-width: 2vw;
  width: auto !important;
  height: 4vh;
}
.btn .btn_text {
  min-width: 4vw;
  width: auto !important;
  height: 4vh;
  text-align: left;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.foot .inputbox {
  min-width: 38vw;
  width: auto !important;
  height: 5vh;
  margin-left:2vw;
  border-radius: 30px;
  background-color: #FFFFFF;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  justify-content: baseline;
  align-items: center;
}

.inputbox .input-container {
  min-width: 38vw;
  width: auto !important;
  height:5vh;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding: 5px;
  cursor:default;
  caret-color:auto;
}

.input-container input {
  border: none;
  outline: none;
  flex: 1;
  border-radius: 5px;
  padding: 5px;
} */

/* .input-container input:focus {
  border: none;
} */

/* .send-button {
  height: 40px;
  height: 40px;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 5px;
} */




/* 弹出框样式 */
.dialog-footer button:first-child {
  margin-right: 10px;
}

/* .chat_box .chat_box1{
  height:60vh ;
  width: 32vw;
  background-color: burlywood;
  border-radius: 15px;
}

.chat_box .chat_box2{
  height:60vh ;
  width: 32vw;
  background-color: rgb(240, 107, 35);
  border-radius: 15px;
} */

</style>



